<template>
    <div id="PersonalCenter">
        <!-- <h3>这是个人中心</h3> -->
        <div class="userLogin">
            <img class="user_img"  src="../assets/img/user.svg" alt="">
            <a class="text_a" href="/">点击登录</a>
            <a class="char_text" href="/">></a>
        </div>
        <!-- 这是下边的 订单  优惠券  收藏 足迹  福利  地址  账号  客服  帮助中心  意见反馈   模块 -->
        <div class="moudle_content">
            <div class="contentTAB">
                <span class="left">
                    <img class="contentTAB_IMG" src="../assets/img/myOrder.png" alt="">
                    <p class="contentTAB_text">我的订单</p>
                </span>
                <span >
                    <img class="contentTAB_IMG" src="../assets/img/coupon.png" alt="">
                    <p class="contentTAB_text">优惠券</p>
                </span>
                <span class="right">
                    <img class="contentTAB_IMG" src="../assets/img/gift.png" alt="">
                    <p class="contentTAB_text">礼品卡</p>
                </span>
                <span class="left">
                    <img class="contentTAB_IMG" src="../assets/img/myCollextion.png" alt="">
                    <p class="contentTAB_text">我的收藏</p>
                </span>
                <span >
                    <img class="contentTAB_IMG" src="../assets/img/footPrint.png" alt="">
                    <p class="contentTAB_text">我的足迹</p>
                </span>
                <span class="right">
                    <img class="contentTAB_IMG" src="../assets/img/welfare.png" alt="">
                    <p class="contentTAB_text">会员福利</p>
                </span>
                <span class="left">
                    <img class="contentTAB_IMG" src="../assets/img/address.png" alt="">
                    <p class="contentTAB_text">地址管理</p>
                </span>
                <span >
                    <img class="contentTAB_IMG" src="../assets/img/SecurityCenter.png" alt="">
                    <p class="contentTAB_text">账号安全</p>
                </span>
                <span class="right">
                    <img class="contentTAB_IMG" src="../assets/img/customerService.png" alt="">
                    <p class="contentTAB_text">联系客服</p>
                </span>
                <span class="left">
                    <img class="contentTAB_IMG" src="../assets/img/HelpCenter.png" alt="">
                    <p class="contentTAB_text">帮助中心</p>
                </span>
                <span >
                    <img class="contentTAB_IMG" src="../assets/img/FeedBack.png" alt="">
                    <p class="contentTAB_text">意见反馈</p>
                </span> 
            </div>
            <div class="marginBotton" style=" padding-bottom: 60px;"></div>
            
        </div>
         <tab-btn></tab-btn>
    </div>
    
</template>

<script>
import tabBtn from '../components/tabBtn.vue'
export default {
    data() {
       return {
       } 
    },
    components:{
        tabBtn
    }
}
</script>
<style lang="less" scoped>
    #PersonalCenter{
       display: flex;
       flex-direction: column;
        .userLogin{
            width: 100%;
            height: 200px;
            position: relative;
            background: black;
           .user_img{
                background: #ccc;
                border-radius: 30px;
                position: absolute;
                left: 10px;
                top: 100px;
           }
           .text_a{
                color: white;
                position: absolute;
                left: 80px;
                top: 120px;
           }
           .char_text{
                background: #ccc;
                width: 20px;
                height: 20px;
                border-radius: 10px;
                color: white;
                position: absolute;
                right: 10px;
                top: 120px;
           }
        }
        .moudle_content{
            width: 100%;
            height: 300px;
            margin: 0px;
            padding: 0px;
            .contentTAB{
              width: 100%;
              display: flex;
              flex-wrap: wrap;
              border: 0px ;
             span{
                 width: 32%;
                 height: 90px;
                 border:1px solid #ccc;
                 .contentTAB_IMG{
                     width: 30px;
                     height: 30px;
                     margin-top: 20px;
                 }
                 .contentTAB_text{
                     padding-top: 10px;
                     margin: 0px;
                     
                 }
                
             }
             .left{
                 border-left: none;
             }
             .right{
                  border-right: none;
             }
              
            }
           
        }
    
      
    }
</style>